import { title } from '../../../settings';
<!--
 * @Author: your name
 * @Date: 2021-10-22 17:13:31
 * @LastEditTime: 2021-10-28 16:49:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \estore-manage\src\pages\base\address\addressDetails.vue
-->
<template>
    <div>
        
        <!--添加按钮  -->
        <el-button size="mini" type="primary" @click="addHandler">
            <i class="el-icon-circle-plus"></i>
            添加
        </el-button>
        <!-- 地址表 -->
        <div class="address_table">
            <!-- {{address}} -->
            <el-table
            :data="address.list">
                <el-table-column label="用户名" prop="realname"></el-table-column>
                <el-table-column  label="手机号" prop="telephone">
                    <!-- <template v-slot="scope">
                        <i class="el-icon-edit"></i>
                        <span>{{scope.row.telephone}}</span>
                    </template> -->
                </el-table-column>
                <el-table-column label="地址">
                    <template v-slot="scope">
                        {{scope.row.province}}{{scope.row.city}}
                        {{scope.row.area}}{{scope.row.address}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button @click="editHandler(scope.row)" size="mini" type="primary" plain>
                              <i class="el-icon-edit"></i>
                              修改
                        </el-button>
                        <el-button @click="delHandler(scope.row)"  size="mini" type="danger" plain>
                            <i class="el-icon-delete"></i>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <!-- 分页 -->
        <div class="page" style="text-align:center;margin-top:10px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[2, 5, 10, 15, 20]"
                :page-size="params.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
            
        </div>
        <!-- 模态框  添加、修改数据 -->
        <div class="model" >
            <el-dialog :title="title" :visible.sync="dialogVisible">
                <el-form :model="form">
                    <el-form-item label="用户名">
                        <el-input v-model="form.realname">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="form.telephone">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="省">
                        <el-input v-model="form.province">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="城市">
                        <el-input v-model="form.city">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="地区">
                        <el-input v-model="form.area">

                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button size="mini" type="primary" @click="confimHandler">确认</el-button>
                <el-button size="mini" type="primary" @click="cancelHandler">取消</el-button>
            </el-dialog>

        </div>

       
       
    </div>
</template>
<script>

import { get,post } from '@/utils/request';
export default {
    data(){
        return {
            // optionsThree: regionData,
            // optionsTwo: provinceAndCityData,
            // selectedThree: ["120000", "120100", "120102"],
            // selectedTwo: [],
            // 模态框显示
            dialogVisible:false,
            // 显示的address数据
            address:{},
            // 分页数据
            params:{
                pageSize:2,
                page:1,
            },
            // 表单数据
            form:{},
            // 数据条数
            total:0,
            title:"新增地址"
        }
    },
    methods:{
        cancelHandler(){
            
        },
        // 提交
        confimHandler(){
            let url = "/address/saveOrUpdate";
            post(url,this.form).then(resp=>{
               
            });
            this.form={};
            this.dialogVisible = false;
            this.loadAddress();
        },

        // 添加
        addHandler(){
            this.dialogVisible=true;
        },
        // 页面初始化加载数据
        loadAddress(){
            let url = "/address/pageQuery";
            get(url,this.params).then(resp=>{
                this.address = resp.data;
                console.log(resp.data.list);
                this.total = this.address.total;
                console.log("刷新");
               
            })
        },
         //分页改变函数
        handleCurrentChange(page){
            this.params.page=page;
            this.loadAddress()
        },
        // 每页条数改变函数
        handleSizeChange(val){
            this.params.pageSize = val;
            this.loadAddress()
        },
        // 编辑按钮事件
        editHandler(row){
            this.dialogVisible=true;
            this.form = row;

        },
        // 删除按钮事件
        delHandler(row){
            let url = '/address/deleteById';
            get(url,row).then(resp=>{
                console.log("删除",resp);
                this.loadAddress();
            })

        }
        

    },
    mounted(){
        this.loadAddress();
        
    }
    
}
</script>